import styles from './dialog-message-input.module.scss'
import {useRef, useState} from "react";
import {Button, Input} from "antd";
import {userChatStore} from "@/app/store/chat-store";
import DialogMessageActions from "@/app/components/dialog/dialog-message-actions";

interface Props {
    onEnter: (value: any) => void;
}

/**
 * 对话消息输入
 * @constructor
 */
export function DialogMessageInput(props: Props) {
    const textAreaRef = useRef<HTMLTextAreaElement>(null);
    const {onEnter} = props;
    const chatStore = userChatStore();
    const [value, setValue] = useState<string>();
    const config = chatStore.currentSession().config;

    const onSend = () => {
        onEnter(value);
        setValue(undefined);
    }


    const handleKeyDown = (e: any) => {
        if (e.ctrlKey && e.key === "Enter") {
            onSend();
        }
    }

    return (
        <div className={styles.wrapper}>
            <DialogMessageActions config={config}/>
            <Input.TextArea
                value={value}
                onChange={(e) => setValue(e.target.value)}
                className={styles.textarea}
                placeholder={"请输入"}
                autoFocus
                onKeyDown={handleKeyDown}
            />
            <Button className={styles["btn"]} disabled={!value?.length} type="primary" onClick={onSend}>
                发送(Ctrl+Enter)
            </Button>
        </div>
    )
}
